<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
  <!-- 视口标签，禁止用户在移动端随意拉动 -->
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>首页</title>
  <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="css/common.css">

  
  <style type="text/css">
  header {
    padding-bottom:50px;
  }


  .content-message {
  /* box-shadow: 0 9px 20px 0 rgba(0,170,238,.4);*/
   box-shadow: 0 9px 20px 0 rgba(255,179,168,.5);
  margin-bottom: 20px;

 }

 .content-message .news-time {
  font-size: 14px;
 }
 .content-message .news-title,
 .content .content-info p,
 .content-mobile p {
  font-size: 16px;

}

.content-message .message-list .more {
  text-align: right;
}


.content-mobile {
  padding: 60px 0;
}



.content-mobile .phone-info img {
  display: inline-block;
}

.content-mobile .active-list > li {
  box-shadow: 0 9px 20px 0 rgba(0,170,238,.4);
  text-align: center;
}
.content-mobile .endtitle {
  text-align: center;
  padding-top: 20px;
}

/* 当屏幕宽度大于768时，将元素高度设置为410px */

@media (min-width: 768px) {
  #main_ad > .carousel-inner > .item {
    height: 410px;
  }
}

#main_ad > .carousel-inner > .item > img {
  width: 100%;
}



</style>
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <!-- 头部区域 -->
   <header>
    <!--导航条设计-->



  </header>


  <!-- 广告轮播 -->
  <section id="main_ad" class="carousel slide" data-ride="carousel">
    <!-- 下面的小点点，活动指示器 -->
    <ol class="carousel-indicators">
      <li data-target="#main_ad" data-slide-to="0" class="active"></li>
      <li data-target="#main_ad" data-slide-to="1"></li>
      <li data-target="#main_ad" data-slide-to="2"></li>
      <li data-target="#main_ad" data-slide-to="3"></li>
    </ol>
    <!-- 轮播项 -->
    <div class="carousel-inner" role="listbox">
      <div class="item active" data-image-lg="img/banner/slider-01-2100.jpg" data-image-xs="img/banner/slider-01-640.jpg"></div>
      <div class="item" data-image-lg="img/banner/slider-02-2100.jpg" data-image-xs="img/banner/slider-02-640.jpg"></div>
      <div class="item" data-image-lg="img/banner/slider-03-2100.jpg" data-image-xs="img/banner/slider-03-640.jpg"></div>
      <div class="item" data-image-lg="img/banner/slider-04-2100.jpg" data-image-xs="img/banner/slider-04-640.jpg"></div>
    </div>
    <!-- 控制按钮 -->
    <a class="left carousel-control" href="#main_ad" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">上一页</span>
    </a>
    <a class="right carousel-control" href="#main_ad" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">下一页</span>
    </a>
  </section>


  <!-- 中间内容 -->
  <section>
    <div class="container">
      <div class="row content-message">
      
      <!--新闻区  -->
       <div class="col-md-6">
         <h3>新闻区</h3>
         <ul class="list-group message-list">
       
         <a href="#" class="list-group-item">
           <span class="text-muted news-title">房企的PPP发展模式</span>
           <span class="badge news-time">2018/4/25</span>
         </a>
         <a href="#" class="list-group-item">
           <span class="text-muted news-title">房企的PPP发展模式</span>
           <span class="badge news-time">2018/4/25</span>
         </a>
         <a href="#" class="list-group-item">
           <span class="text-muted news-title">房企的PPP发展模式</span>
           <span class="badge news-time">2018/4/25</span>
         </a>
         <a href="#" class="list-group-item">
           <span class="text-muted news-title">房企的PPP发展模式</span>
           <span class="badge news-time">2018/4/25</span>
         </a>
         <a href="#" class="list-group-item">
           <span class="text-muted news-title">房企的PPP发展模式</span>
           <span class="badge news-time">2018/4/25</span>
         </a>
        <li class="list-group-item more">
          <a href="" class="center-block">更多</a>
        </li>
      </ul>
       </div>
      <!--/新闻区  -->
       <div class="col-md-6">
         <h3>公告栏</h3>
         <ul class="list-group message-list">
       
         <a href="#" class="list-group-item">
           <span class="text-muted news-title">房企的PPP发展模式</span>
           <span class="badge news-time">2018/4/25</span>
         </a>
         <a href="#" class="list-group-item">
           <span class="text-muted news-title">房企的PPP发展模式</span>
           <span class="badge news-time">2018/4/25</span>
         </a>
         <a href="#" class="list-group-item">
           <span class="text-muted news-title">房企的PPP发展模式</span>
           <span class="badge news-time">2018/4/25</span>
         </a>
         <a href="#" class="list-group-item">
           <span class="text-muted news-title">房企的PPP发展模式</span>
           <span class="badge news-time">2018/4/25</span>
         </a>
         <a href="#" class="list-group-item">
           <span class="text-muted news-title">房企的PPP发展模式</span>
           <span class="badge news-time">2018/4/25</span>
         </a>
        <li class="list-group-item more">
          <a href="" class="center-block">更多</a>
        </li>
      </ul>
       </div>
       

    </div>
    <div class="row content">

      <div class="col-md-4 content-info">
        <img src="img/i1.jpg" class="img-responsive" alt="img1">
        <h3>安全可靠</h3>
        <p class="text-muted">超过10年金融风控经验团队全方位可定制的安全策略体系</p>
      </div>


      <div class="col-md-4 content-info">
        <img src="img/i2.jpg" class="img-responsive" alt="img2">
        <h3>快速便捷</h3>
        <p class="text-muted">点对点的用户自由交易模式支持多种资金渠道的兑换方式</p>

      </div>
      <div class="col-md-4 content-info">
       <img src="img/i3.jpg" class="img-responsive" alt="img3">
       <h3>积分全面</h3>
       <p class="text-muted">甄选主流数字资产交易币种满足多方面的多资产交易体验</p>

     </div>


   </div>
   <div class="row content-mobile">
    <div class="col-md-10">
      <div class="mobile-title">
        <h3>全面支持手机浏览</h3>
        <p class="text-muted">随时提醒 快速交易</p>
      </div>
      
      <ul class="list-inline active-list">
        <li><dl>
          <dd><h3 class="text-primary">充积分</h3>
            <p class="text-muted">用户可以自由充积分购买莱茨狗</p>
          </dd>
        </dl></li>
        <li><dl><dd><h3 class="text-primary">提积分</h3>   <p class="text-muted">用户可把积分提取到莱茨狗帐号</p></dd></dl></li>
        <li><dl><dd><h3 class="text-primary">买入积分</h3> <p class="text-muted">用户可以自由买入积分</p></dd></dl></li>
        <li><dl><dd><h3 class="text-primary">卖出积分</h3> <p class="text-muted">会员可以自由卖出账户中的积分</p></dd></dl></li>
        
      </ul>
      

    </div>
    <div class="col-md-2 phone-info">
     <img src="img/phone.jpg" class="img-responsive phoneimg" alt="img3">

   </div>
   <div class="endtitle">
     <h3>所有操作，一步到位。让您更省心</h3>
   </div>
 </div>
</div>
</section>
<!-- end中间内容 -->

<!-- 底部内容 -->
<footer>

</footer>
<!-- 底部内容end -->
<script src="lib/jquery/jquery-2.1.1.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="template.js"></script>

<script type="text/javascript">
  $(function () {

    $('header').load('common/nav.html');
    $('footer').load('common/footer.html');

    function resize() {
    // 获取屏幕宽度
    var windowWidth = $(window).width();
    // 判断屏幕属于大还是小
    var isSmallScreen = windowWidth < 768;
    // 根据大小为界面上的每一张轮播图设置背景
    // $('#main_ad > .carousel-inner > .item') // 获取到的是一个DOM数组（多个元素）
    $('#main_ad > .carousel-inner > .item').each(function(i, item) {
      // 因为拿到是DOM对象 需要转换
      var $item = $(item);
      // var imgSrc = $item.data(isSmallScreen ? 'image-xs' : 'image-lg');
      var imgSrc =
      isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');

      // 设置背景图片
      $item.css('backgroundImage', 'url("' + imgSrc + '")');
      //
      // 因为我们需要小图时 尺寸等比例变化，所以小图时我们使用img方式
      if (isSmallScreen) {
        $item.html('<img src="' + imgSrc + '" alt="" />');
      } else {
        $item.empty();
      }
    });
  }

  $(window).on('resize', resize).trigger('resize');

   // 1. 获取手指在轮播图元素上的一个滑动方向（左右）

  // 获取界面上的轮播图容器
  var $carousels = $('.carousel');
  var startX, endX;
  var offset = 50;
  // 注册滑动事件
  $carousels.on('touchstart', function(e) {
    // 手指触摸开始时记录一下手指所在的坐标X
    startX = e.originalEvent.touches[0].clientX;
    // console.log(startX);
  });

  $carousels.on('touchmove', function(e) {
    // 变量重复赋值
    endX = e.originalEvent.touches[0].clientX;
    // console.log(endX);
  });
  $carousels.on('touchend', function(e) {
    // console.log(e);
    // 结束触摸一瞬间记录最后的手指所在坐标X
    // 比大小
    // console.log(endX);
    // 控制精度
    // 获取每次运动的距离，当距离大于一定值时认为是有方向变化
    var distance = Math.abs(startX - endX);
    if (distance > offset) {
      // 有方向变化
      // console.log(startX > endX ? '←' : '→');
      // 2. 根据获得到的方向选择上一张或者下一张
      //     - $('a').click();
      //     - 原生的carousel方法实现 http://v3.bootcss.com/javascript/#carousel-methods
      $(this).carousel(startX > endX ? 'next' : 'prev');
    }
  });
})
</script>
</body>
</html>